<template>
    <div class="order-report">
        <div class="report-table-top-title">活跃商家数</div>

        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <el-radio-group v-model="radio" size="small">
                    <el-radio-button label="当天"></el-radio-button>
                    <el-radio-button label="7天"></el-radio-button>
                    <el-radio-button label="一个月"></el-radio-button>
                    <el-radio-button label="自定义"></el-radio-button>
                </el-radio-group>
                <div class="report-table-form1-item word samll" style="width: 35px"></div>
                <div class="report-table-form1-item" style="width: 200px" v-show="type === 4">
                    <el-date-picker
                        size="small"
                        v-model="timeStart"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 20px"
                    v-show="type === 4"
                > 至</div>
                <div class="report-table-form1-item" style="width: 200px" v-show="type === 4">
                    <el-date-picker
                        size="small"
                        v-model="timeEnd"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
                <!-- <div class="report-table-form1-item word samll" style="width: 80px">{{businessTime}}</div> -->
                <el-button type="primary" size="small" style="margin-left:10px" @click="search">查询</el-button>
            </div>
        </div>
        <div class="order-report-padding-16"></div>
        <div class="eChart-wrapper">
            <div class="eChart-pic" id="myChart2"></div>
        </div>

        <div class="page-padding"></div>
    </div>
</template>

<script type="text/ecmascript-6">
import echarts from 'echarts'
export default {
    data: function () {
        return {
            // businessTime: '', // 营业时间

            timeStart: '',
            timeEnd: '',

            data: [],
            dataList: [],
            total: '',
            time1: [],
            data1: [],
            echart2: false,
            echart1: true,
            radio: '当天', // 昨日 今日
            type: 1,
            echartType: 1
        }
    },
    mounted () { },
    created () {
            var time1 = (new Date()).getTime()
            let today = new Date(time1) // 获取的是当天日期
            today = today.getFullYear() + '-' + (today.getMonth() > 9 ? (today.getMonth() + 1) : '0' + (today.getMonth() + 1)) + '-' + (today.getDate() > 9 ? (today.getDate()) : '0' + (today.getDate()))
            this.startTime = today
            this.endTime = today
            this.getInfo1()
            this.setPie2()
        // this.$FS()
    },
    watch: {
        radio () {
            var time3 = (new Date()).getTime() - 29 * 24 * 60 * 60 * 1000 // 获取一个月
            var time2 = (new Date()).getTime() - 6 * 24 * 60 * 60 * 1000 // 获取7天
            var time1 = (new Date()).getTime()
            let aMonth = new Date(time3) // 获取的是前一天日期
            let sevenDay = new Date(time2) // 获取的是前一天日期
            let today = new Date(time1) // 获取的是当天日期
            aMonth = aMonth.getFullYear() + '-' + (aMonth.getMonth() > 9 ? (aMonth.getMonth() + 1) : '0' + (aMonth.getMonth() + 1)) + '-' + (aMonth.getDate() > 9 ? (aMonth.getDate()) : '0' + (aMonth.getDate()))
            sevenDay = sevenDay.getFullYear() + '-' + (sevenDay.getMonth() > 9 ? (sevenDay.getMonth() + 1) : '0' + (sevenDay.getMonth() + 1)) + '-' + (sevenDay.getDate() > 9 ? (sevenDay.getDate()) : '0' + (sevenDay.getDate()))
            today = today.getFullYear() + '-' + (today.getMonth() > 9 ? (today.getMonth() + 1) : '0' + (today.getMonth() + 1)) + '-' + (today.getDate() > 9 ? (today.getDate()) : '0' + (today.getDate()))
            if (this.radio === '自定义') {
                this.type = 4
                this.timeStart = ''
                this.timeEnd = ''
            }
            if (this.radio === '一个月') {
                this.type = 3
                this.startTime = aMonth
                this.endTime = today
                this.getInfo1()
            }
            if (this.radio === '7天') {
                this.type = 2
                this.startTime = sevenDay
                this.endTime = today
                this.getInfo1()
            }
            if (this.radio === '当天') {
                this.type = 1
                this.startTime = today
                this.endTime = today
                this.getInfo1()
            }
        }
    },
    components: {},
    computed: {},
    methods: {
        setPie2 () {
            this.$nextTick(() => {
                let myChart = echarts.init(
                    document.getElementById('myChart2'),
                    'light'
                )
                //			echarts.init(this.$refs.chartOne)
                myChart.setOption({
                    title: {
                        text: '活跃商家数'
                    },
                     tooltip: {
                        trigger: 'item'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.time2
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: this.data2,
                        type: 'line',
                        smooth: true
                    }]
                })
            })
        },

        search () {
            if (this.type === 4) {
                if (!this.timeEnd) {
                    this.$message({
                    message: '请选择时间',
                    type: 'warning'
                })
                return
                }
                if (!this.timeStart) {
                    this.$message({
                    message: '请选择时间',
                    type: 'warning'
                })
                return
                }
                if (this.timeStart > this.timeEnd) {
                    this.$message({
                        message: '开始时间不能大于结束时间',
                        type: 'warning'
                    })
                    return
                }
                if (this.timeStart && this.timeEnd) {
                    this.startTime = this.timeStart
                     this.endTime = this.timeEnd
                    this.getInfo1()
                }
            } else {
            this.getInfo1()
            }
        },
        // 活跃商家数
        getInfo1 () {
            this.$http.post(this.$store.state.IP + '/Companylively/getCompanylively', {
                data: {
                    begindate: this.startTime,
                    enddate: this.endTime
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    // console.log('调用apk列表成功')
                    console.log(response.data)
                    let dataList = response.data.list
                    this.data2 = []
                    this.time2 = []
                    dataList.forEach((item, index) => {
                        this.data2.push(item.livelynum)
                        this.time2.push(this.timestampToTime(item.livelyday))
                    })
                   this.setPie2()
                }
                if (response.ret !== '0') {
                    // console.log('调用apk列表失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.eChart-wrapper
    width: 100%
    min-height: 550px
    padding: 5px 0 0 22px
    box-sizing: border-box
    font-size: 0
    position: relative
    background: #fff
    margin-top: 0px

    .eChart-pic
        position: absolute
        left: 10px
        top: 10px
        right: 500px
        bottom: 22px
        width: 950px
        display: inline-block
        vertical-align: top

        /* background #13ce66 */
        .eChart-pic-no-data
            position: absolute
            width: 600px
            height: 198px
            top: 50%
            left: 50%
            transform: translate(-50%, -50%)
            // background: url('../../../common/pic/noData.png')
            background-size: cover

    .eChart-table
        position: absolute
        right: 50px
        height: 500px
        top: 22px
        bottom: 0
        width: 45%
        margin-left: 45px
        .eChart-table-in
            width: 100%
            min-height: 30%
            height: 500px
            // margin-left: 25px
            line-height: 30px
            font-size: 16px
            background: #f8f8fa

            // padding: 15px 0 15px 15px
            // border: 1px solid rgba(0, 0, 0, 0.2)
            .eChart-table-in-top
                height: 54px
                line-height: 54px
                width: 100%
                font-size: 18px
                margin-left: 10px
                border-bottom: 1px solid #e9ebf1
                // padding-left: 22px

                .eChart-table-in-top-icon
                    width: 22px
                    height: 22px
                    display: inline-block
                    vertical-align: middle
                    background-size: cover
                    // background-image: url('../../../common/pic/icons/icons_2_finance/icon_1.png')

            .eChart-table-in-down
                padding: 15px 0 15px 44px
                font-size: 16px

.order-report
    width: 100%
    background: #fff
    height: 500px
    

    .order-report-padding-16
        width: 100%
        height: 22px
        background: #f1f0f5

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background: #f1f0f5
        position: relative

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        box-sizing: border-box
        background: #fff
</style>
